<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      flex: 1;
    }

    .left,
    .right {
      height: 100px;
      background: pink;
    }

    .left {
      width: 200px;
    }

    .right {
      width: 100px;
    }

    .center {
      width: 100%;
      height: 100px;
      background-color: skyblue;
    }

    ul {
      position: fixed;
      left: 100px;
      top: 50px;
      background: red;
    }
    li:nth-child(n + 10) {
      background: green;
    }
    li:nth-child(n + 21) {
      background: red;
    }
  </style>
</head>

<body>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <button class="clk" id="myButton">点击</button>

  <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
  <!-- <div class="container">
    <button onclick="addRecord('order', 'readwrite', {'xs002': '13213'})">插入</button>
    <button onclick="addRecord('order', 'readwrite', {'xs002': '1111', 'id': 1})">更新</button>
  </div> -->
</body>

<script>
  function makeFn() {
    let msg = '111111'
    return function () {
      console.log(msg)
    }
  }

  let fn = makeFn()
  fn()
  fn = null
  // fn()

  function defer(delay) {
    console.time()
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(1)
      }, delay * 1000);
    })
  }





  defer(1).then(res => {
    console.log(res);
    console.timeEnd()
  })





  const Message1 = function (text) {
    // console.log(text);
    // this.text = text;
  };

  const Message = (text) => {
    // console.log(text);
    // this.text = text;
  };
  console.dir(Message);
  console.dir(Message1);
  // const helloMessage = new Message('Hello World!')

  const button = document.getElementById('myButton');
  button.addEventListener('click', (el) => {
    console.log(el.target);
    console.log(this === window); // true
    el.target.innerHTML = 'Clicked button';
  })

  var database
  /**
   * 新建或打开数据库
   * @param {String} dbname 数据库名
   * @param {Number} version 版本号
   * @param {String} storeName 仓库名
   * @param {String} key 索引
   * @param {Boolean} increment 是否自增
   */
  function initIndexdDB(dbname, version, storeName, key, increment) {
    var indexdDB = window.indexdDB || window.webkitIndexdDB || window.mozIndexdDB || window.msIndexdDB;
    var request = indexedDB.open(dbname, version);
    // var database=null;
    request.onsuccess = function (event) {
      console.log("创建/打开数据库成功。");

      //让数据库 可在任何地方访问
      database = request.result;
      //console.log("init"+database);

    };
    request.onerror = function (event) {
      console.log("发生错误：" + request.error);
    };
    request.onupgradeneeded = function (event) {
      alert("第一次创建数据库或者更新数据库。");
      //alert("数据库老版本为：" + event.oldVersion + " 更新后新版本为：" + event.newVersion)
      database = request.result;
      if (!increment)
        var objectStore = database.createObjectStore(storeName, {
          keyPath: key
        });
      else
        var objectStore = database.createObjectStore(storeName, {
          keyPath: key,
          autoIncrement: true
        });
    };
  }

  initIndexdDB('testDB1', 1, 'order', 'id', true)

  /**
   * 新增数据
   * @param {String} objectStore 数据库名
   * @param {Number} method 版本号
   * @param {String} objectData 仓库名
   */
  function addRecord(objectStore, method, objectData) {
    // console.log(database); 
    var transaction = database.transaction([objectStore], method);
    var objectStore = transaction.objectStore(objectStore);
    var request = objectStore.put(objectData);
    request.onerror = function (event) {
      console.log("发生错误：" + request.error);
    };
    request.onsuccess = function (event) {
      console.log("添加成功");
    };
  }
</script>

</html>